- CSS
- 1 HTML 基础及其实战
- 2 CSS 基础及其实战
- 2.1 CSS的引入方式
- 2.2 CSS选择器
- 2.2.1 基本选择器
- 2.2.2 并集选择器 “，”
- 2.2.3 交集选择器 “c1 c2”
- 2.2.4 后代选择器 ” 空格”
- 2.2.5 子代选择器“>”
- 2.2.6 相邻兄弟选择器 “+”以及所有兄弟选择器 “~”
- 2.2.7 属性选择器 [属性名]
- 2.2.8 伪类选择器
- 2.2.9 css3新增的伪类选择器
- 2.2.9.1 :not
- 2.2.9.2 :last-child
- 2.2.9.3 :nth-child(number)
- 2.2.9.4 :only-child 只有一个子元素的元素
- 2.2.9.5 :nth-last-child(n) 倒数第几个元素
- 2.2.9.6 :first-of-type 同级别的第一个元素
- 2.2.9.7 :last-of-type 同级别的最后一个元素
- 2.2.9.8 :only-of-type 只有一个兄弟（独苗）的元素
- 2.2.9.9 :nth-of-type(n) 第n个同级兄弟元素
- 2.2.9.10 :nth-last-of-type(n) 倒数第n个同级兄弟元素
- 2.2.9.11 :empty 空内容的元素
- 2.2.9.12 :checked 被选中 主要用在input的表单元素
- 2.2.10 伪元素选择器
- 2.2.10 .1 :first-line 第一行起作用
- 2.2.10 .2 :first-letter 第一个文字内容
- 2.2.10 .3 :before 在元素之前添加
- 2.2.10 .4 :after 在元素之后添加
- 2.3 权重
- 2.4 CSS的属性继承
- 2.5 background属性的使用技巧
- 2.6 雪碧图的使用技巧
- 2.7 常见的兼容性处理
- 3 实战
CSS
1 HTML 基础及其实战
1.1 HTML标签和标签属性
1.2 元素和元素分类
1.2.1 元素
1.2.2 行内元素 & 块级元素
块级元素
行内元素
元素之间的转换
1.3 标签语义化
logo标签使用h1标签（h1的权重最大）
1.3.1 标签语义化的好处
1.3.2 标签语义化的法则
1.3.3 标签语义化的含义
1.46 网页的基本结构
1.<!-- html5 的 文档声明 -->
2.<!DOCTYPE html>
3.<!-- 根元素lang语言 en英语 ch中文 -->
4.<html lang="en">
5.<!-- 网页的头部 -->
6.<head>
7. <!--
8. mate元信息
9. 编码 UTF-8
10. 网页的关关键字 SEO优化
11. 网页的描述内容
12. 视口 viewport meta： vb tab(移动端手机页面开发必须加的code)
13. -->
14. <meta charset="UTF-8">
15. <!-- 网页的标题 -->
16. <title>01-网页的基本结构</title>
17. <!-- 标题前的小图标 -->
18. <link rel="shortcut icon" type="text/css" href="https://avatars1.githubusercontent.com/u/31435638?s=460&v=4">
19.</head>
20.<!-- 网页的主体 -->
21.<body>
22.
23.</body>
24.</html>
2 CSS 基础及其实战
css简介
CSS （层叠样式表） 编辑
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
基础语法
命名规范
2.1 CSS的引入方式
2.1.1 CSS的引入方式——行内式
1.<div style="width:250px;height:250px"></div>
2.1.2 CSS的引入方式——内嵌式
1.<style>
2. p{
3. width:250px;
4. height:250px;
5. }
6.</style>
2.1.3 CSS的引入方式——外链式
2.1.4 CSS的引入方式——导入式
2.1.5 link和import的区别
2.2 CSS选择器
2.2.1 基本选择器
标签选择器class（类名）选择器id选择器"*"通配符选择器
2.2.2 并集选择器 “，”
- 样式相同的标签可以并列写在一起 例如（h1,p,div）
2.2.3 交集选择器 “c1 c2”
2.2.4 后代选择器 ” 空格”
2.2.5 子代选择器“>”
2.2.6 相邻兄弟选择器 “+”以及所有兄弟选择器 “~”
2.2.7 属性选择器 [属性名]
2.2.8 伪类选择器
2.2.9 css3新增的伪类选择器
2.2.9.1 :not
2.2.9.2 :last-child
2.2.9.3 :nth-child(number)
- number
- odd
- even
- n
- 2n
- 3n
- 5n
- …
2.2.9.4 :only-child 只有一个子元素的元素
2.2.9.5 :nth-last-child(n) 倒数第几个元素
2.2.9.6 :first-of-type 同级别的第一个元素
2.2.9.7 :last-of-type 同级别的最后一个元素
2.2.9.8 :only-of-type 只有一个兄弟（独苗）的元素
2.2.9.9 :nth-of-type(n) 第n个同级兄弟元素
2.2.9.10 :nth-last-of-type(n) 倒数第n个同级兄弟元素
2.2.9.11 :empty 空内容的元素
2.2.9.12 :checked 被选中 主要用在input的表单元素
2.2.10 伪元素选择器
2.2.10 .1 :first-line 第一行起作用
2.2.10 .2 :first-letter 第一个文字内容
2.2.10 .3 :before 在元素之前添加
2.2.10 .4 :after 在元素之后添加
2.3 权重
2.4 CSS的属性继承
2.5 background属性的使用技巧
2.6 雪碧图的使用技巧
2.7 常见的兼容性处理
3 实战
3.1 css盒模型
3.1.1 传统css盒子模型
3.1.2 CSS3新增的盒子模型
【box-sizing:border-box;】
width= 内容宽+padding+border
height= 内容高+padding+border
3.2 伪类
3.2.1 :before和:after
1.<body>
2. <div id="box">
3. <p id="box_p">等我嗨死...来。</p>
4. </div>
5.</body>
6.<script>
7. let box_p = document.getElementById("box_p");
8. //在页面中我们添加的 伪类 p:after和p:before是看不到html结构的，
9. //通过window.getComputedStyle(targetElement,'伪劣名').属性名 可以获取到伪类的css属性的值
10.
11.console.log(window.getComputedStyle(box_p,"after").content);//"#box p:after"
12. console.log(window.getComputedStyle(box_p,"before").content);//"#box p:before"
13.</script>
